<template>
  <div class="w-full h-[100%] border-solid border-[1px] border-[var(--grid)] flex flex-row justify-between items-center px-[16px] bg-[var(--theme)] s4k:px-[32px] s2k:px-[21.3px] relative" style="border-left: none;border-right: none;border-bottom: none;">
    <div class="text-[1.13rem] text-[#9CA3AF] font-Medium">
      Showing <span class="text-[var(--theme-font-color)]">1-10</span> of <span class="text-[var(--theme-font-color)]">1000</span>
    </div>
    <fwb-pagination @page-changed="pageChanged" id="pagination" v-model="currentPage" :total-pages="1000" show-icons previous-label="" next-label=""></fwb-pagination>
    <div class="mask" v-show="maskShow" @click="back"></div>
  </div>
    
  </template>
  
  <script setup>
  import { FwbPagination,FwbInput } from 'flowbite-vue'
  import { onMounted ,reactive,ref} from "vue";
  const searchCamera = ref(' ')
  const maskShow = ref(false); // 遮罩层
  const fileShow = ref(false); // 选择文件
  const currentPage = ref(1)
  // 页码变化
  const pageChanged = (val) => {
    console.log('val',val)
  }
  const back = () => {
    fileShow.value = false;
    maskShow.value = false;
  }
  const show = () => {
    fileShow.value = !fileShow.value;
    maskShow.value = true;
  };
  const VoiceIndex = ref(1)
  // 语音效果
  const delay = (ms) => {
    return new Promise(resolve => setTimeout(resolve, ms));
  }
  const VoiceClick = () => {
    VoiceIndex.value = 2;
    delay(2000)
      .then(() => {
        VoiceIndex.value = 3;
        return delay(2000);
      })
      .then(() => {
        VoiceIndex.value = 1
      });
  }
  </script>
  
  <style scoped lang="scss">
  .mask {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0);
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
  }
  .loader{
    position: relative;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: conic-gradient(
          #3e8ef7 20%,
          var(--theme-search-bg) 10% 100%
      );
    animation: rotate 1s linear infinite;
    &:before {
      content: '';
      position: absolute;
      top: 2px;
      left: 2px;
      right: 2px;
      bottom: 2px;
      border-radius: 50%;
      background-color: var(--theme);
    }
  }
  @keyframes rotate {
      0% {
          transform: rotate(0deg);
      }
      100% {
          transform: rotate(360deg);
      }
  }
  #pagination{
    margin-right: 32px;
    :deep(button){
      border: solid var(--grid) 1px;
      border-right: none;
      border-radius: 0;
      width: 32px;
      height: 32px;
      font-size: 1.13rem;
      color: #9CA3AF;
      background-color: var(--theme);
      cursor: pointer;
      &:last-child{
        padding-left: 7px;
        padding-right: 7px;
        border-right: solid var(--grid) 1px;
        border-top-right-radius: 6px;
        border-bottom-right-radius: 6px;
        svg{
          transform: scale(1.3);
        }
      }
      &:first-child{
        padding-left: 7px;
        padding-right: 7px;
        border-top-left-radius: 6px;
        border-bottom-left-radius: 6px;
        svg{
          transform: scale(1.3);
        }
      }
    }
    :deep(.text-blue-600){
      color:var(--theme-font-color);
      font-weight: 600;
      background-color: var(--layout-progress-bg);
    }
  }
  #searchCamera {
    padding: 0;
  
    :deep(input) {
      padding-top: 0;
      padding-bottom: 0;
      height: 36px;
      background-color: var(--theme);
      border: solid var(--grid) 1px;
      font-size: 1.13rem;
      font-family: Medium;
      color: #ffffff;
      border-bottom-right-radius: 0;
      border-top-right-radius: 0;
  
      &:focus {
        box-shadow: inset 0 0;
      }
    }
  }
  @media screen and (min-width: 2560px) {
    .s2ksvg {
      transform: scale(1.3);
    }
    #searchCamera {
      :deep(input) {
        height: 48px;
        padding-left: 40px;
      }
    }
    #pagination{
      margin-right: 42.6px;
      :deep(button){
        width: 50px;
        height: 50px;
        &:last-child{
          padding-left: 9.3px;
          padding-right: 9.3px;
          svg{
            transform: scale(1.5);
          }
        }
        &:first-child{
          padding-left: 9.3px;
          padding-right: 9.3px;
          svg{
            transform: scale(1.5);
          }
        }
      }
    }
  }
  @media screen and (min-width: 3840px) {
    .s4ksvg {
      transform: scale(2);
    }
    #searchCamera {
      :deep(input) {
        height: 72px;
        padding-left: 100px;
      }
    }
    #pagination{
      margin-right: 64px;
      :deep(button){
        height: 64px;
        &:last-child{
          padding-left: 14px;
          padding-right: 14px;
          svg{
            transform: scale(2);
          }
        }
        &:first-child{
          padding-left: 14px;
          padding-right: 14px;
          svg{
            transform: scale(2);
          }
        }
      }
    }
  }
  </style>